<template>
  <div class="app-container home">
    <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="12">
          <el-card shadow="hover"  style="height: 300px">
            <el-descriptions title="村庄详情" direction="vertical" :column="5" border>
              <el-descriptions-item label="村庄人员">
                {{ frontPageData.userCount }}
              </el-descriptions-item>
              <el-descriptions-item label="房屋数量">
                {{ frontPageData.houseCount }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover"  style="height: 300px">
            <div id="vaccine_map" style="width: 100%;height:280px;"></div>
          </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="20"  style="margin-bottom: 20px">
      <el-col :span="12">
        <el-card shadow="hover"  style="height: 300px">
          <el-descriptions title="救济金详情" direction="vertical" :column="5" border style="margin-bottom: 20px">
            <el-descriptions-item label="累计捐赠次数">
              {{ frontPageData.alms.donationCumulativeCount }}
            </el-descriptions-item>
            <el-descriptions-item label="累计捐赠金额">
              {{ frontPageData.alms.donationCumulativeAmount }}
            </el-descriptions-item>
            <el-descriptions-item label="累计申领次数">
              {{ frontPageData.alms.applicationCumulativeCount }}
            </el-descriptions-item>
            <el-descriptions-item label="累计申领金额">
              {{ frontPageData.alms.applicationCumulativeAmount }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions direction="vertical" :column="5" border>
            <el-descriptions-item label="近7日捐赠次数">
              {{ frontPageData.alms.donationCumulativeCountByWeek }}
            </el-descriptions-item>
            <el-descriptions-item label="近7日捐赠金额">
              {{ frontPageData.alms.donationCumulativeAmountByWeek }}
            </el-descriptions-item>
            <el-descriptions-item label="近7日申领次数">
              {{ frontPageData.alms.applicationCumulativeCountByWeek }}
            </el-descriptions-item>
            <el-descriptions-item label="近7日申领金额">
              {{ frontPageData.alms.applicationCumulativeAmountByWeek }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" style="height: 300px" >
          <el-descriptions title="扶贫物资详情" direction="vertical" :column="4" border style="margin-bottom: 20px">
            <el-descriptions-item label="累计捐赠次数">
              {{ frontPageData.povertyAlleviationMaterials.donationCumulativeCount }}
            </el-descriptions-item>
            <el-descriptions-item label="累计申领次数">
              {{ frontPageData.povertyAlleviationMaterials.applicationCumulativeCount }}
            </el-descriptions-item>
            <el-descriptions-item label="近7日捐赠次数">
              {{ frontPageData.povertyAlleviationMaterials.donationCumulativeCountByWeek }}
            </el-descriptions-item>
            <el-descriptions-item label="近7日申领次数">
              {{ frontPageData.povertyAlleviationMaterials.applicationCumulativeCountByWeek }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="防疫物资详情" direction="vertical" :column="4" border>
            <el-descriptions-item label="累计捐赠次数">
              {{ frontPageData.epidemicPreventionMaterials.donationCumulativeCount }}
            </el-descriptions-item>
            <el-descriptions-item label="累计申领次数">
              {{ frontPageData.epidemicPreventionMaterials.applicationCumulativeCount }}
            </el-descriptions-item>
            <el-descriptions-item label="近7日捐赠次数">
              {{ frontPageData.epidemicPreventionMaterials.donationCumulativeCountByWeek }}
            </el-descriptions-item>
            <el-descriptions-item label="近7日申领次数">
              {{ frontPageData.epidemicPreventionMaterials.applicationCumulativeCountByWeek }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="12">
        <el-card shadow="hover"  style="height: 300px">
          <div id="funds_map" style="width: 100%;height:280px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" style="height: 300px" >
          <el-form ref="form" :model="form" label-width="auto" style="width: 100%">
                            <el-form-item label="物资类型" prop="materials">
                                <el-select v-model="form.materials" placeholder="请选择物资类型" @change="materialsChange">
                                    <el-option
                                        v-for="item in materialsList"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
          <div id="materials_map" style="width: 100%;height:220px;"></div>
        </el-card>
      </el-col>
      
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      
      
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";       
import { getFrontPageData } from "@/api/rural/frontPageController";
export default {
  name: "Index",
  data() {
    return {
      form: {
        materials: "羊仔"
      },
      vaccineOption: {
        title: {
          text: '疫苗接种情况'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['第一剂次', '第二剂次', '第三剂次']
        },
        series: [
          {
            name: '已接种',
            type: 'bar',
            data: [2, 1, 1]
          },
          {
            name: '未接种',
            type: 'bar',
            data: [1, 2, 2]
          }
        ]
      },
      fundsOption: {
        title: {
          text: '资金详情'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '资金余额（元）',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 9000, name: '失业救济金' },
              { value: 10000, name: '扶贫救济金' }
            ]
          }
        ]
      },
      materialsOption: {
        title: {
          text: '羊仔变化详情'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['羊仔']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2022-01-01', '2021-02-01', '2021-03-01', '2021-04-01', '2021-05-01', '2021-06-01', '2021-07-01']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '羊仔',
            type: 'line',
            data: [0, 110, 100, 125, 50, 30, 0]
          },
        ]
      },
      materialsList: ["羊仔","蔬菜种子"],
      frontPageData: {
        alms: {
          applicationCumulativeAmount: 0,
          applicationCumulativeAmountByWeek: 0,
          applicationCumulativeCount: 0,
          applicationCumulativeCountByWeek: 0,
          donationCumulativeAmount: 0,
          donationCumulativeAmountByWeek: 0,
          donationCumulativeCount: 0,
          donationCumulativeCountByWeek: 0
        },
        epidemicPreventionMaterials: {
          applicationCumulativeCount: 0,
          applicationCumulativeCountByWeek: 0,
          donationCumulativeCount: 0,
          donationCumulativeCountByWeek: 0
        },
        povertyAlleviationMaterials: {
          applicationCumulativeCount: 0,
          applicationCumulativeCountByWeek: 0,
          donationCumulativeCount: 0,
          donationCumulativeCountByWeek: 0
        },
        userCount: 0,
        houseCount: 0
      }
    };
  },
  created(){
    getFrontPageData().then(response => {
      this.frontPageData = response.data
      let completedVaccination = this.frontPageData.completedVaccination
    let vaccineOptionYAxisData = []
    let completedVaccinationData = []
    for(let i =0;i<completedVaccination.length;i++){
      vaccineOptionYAxisData.push(completedVaccination[i].vaccinationDoses)
      completedVaccinationData.push(completedVaccination[i].count)
    }
    let undoneVaccination = this.frontPageData.undoneVaccination
    let undoneVaccinationData = []
    for(let i =0;i<undoneVaccination.length;i++){
      undoneVaccinationData.push(undoneVaccination[i].count)
    }
    this.vaccineOption.yAxis.data = vaccineOptionYAxisData
    this.vaccineOption.series[0].data = completedVaccinationData
    this.vaccineOption.series[1].data = undoneVaccinationData

    console.log(vaccineOptionYAxisData)
    console.log(completedVaccinationData)
    console.log(undoneVaccinationData)

    let fundsOptionData = []
    let ruralBenefitAnagements = this.frontPageData.alms.ruralBenefitAnagements
    for(let i =0;i<ruralBenefitAnagements.length;i++){
      let data = {}
      data.name = ruralBenefitAnagements[i].benefitType
      data.value = ruralBenefitAnagements[i].benefitAmount
      fundsOptionData.push(data)
    }
    this.fundsOption.series[0].data = fundsOptionData

    console.log(fundsOptionData)
    this.initEchartVaccineMap()
    this.initEchartFundsMap()
    this.initEchartMaterialsMap()
    })
  },
  mounted(){
    
  },
  methods: {
    initEchartVaccineMap() {
      let mapDiv = document.getElementById('vaccine_map');
      let myChart = echarts.init(mapDiv);
      myChart.setOption(this.vaccineOption,{notMerge: true});
      this.$forceUpdate()
    },
    initEchartFundsMap() {
      let mapDiv = document.getElementById('funds_map');
      let myChart = echarts.init(mapDiv);
      myChart.setOption(this.fundsOption,{notMerge: true});
      this.$forceUpdate()
    },
    initEchartMaterialsMap() {
      let mapDiv = document.getElementById('materials_map');
      let myChart = echarts.init(mapDiv);
      myChart.setOption(this.materialsOption,{notMerge: true});
      this.$forceUpdate()
    },
    materialsChange(){
      this.materialsOption.series[0].data = [0, 150, 90, 250, 200, 40, 30]
      this.materialsOption.series[0].name = this.form.materials
      this.materialsOption.legend.data = [this.form.materials]
      this.materialsOption.title.text = this.form.materials + "变化情况"
      this.initEchartMaterialsMap()
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
 .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>

